<template>
    <div class="container flex flex-col items-center p-6 rounded-lg">
        <div class="dictionary-header">
            <el-radio-group v-model="rObj.tabIndex">
                <el-radio-button :value="0">n.</el-radio-button>
                <el-radio-button :value="1">exclam.</el-radio-button>
            </el-radio-group>
        </div>
        <div class="dictionary-header">
            <div class="word">boy</div>
        </div>
        <div v-if="rObj.tabIndex == 0" class="definition-section w-[100%]">
            <h2>noun(名词)</h2>
            <ol>
                <li>
                    <span class="text-xl text-gray-500">[countable] </span>
                    <span class="text-xl text-[#eb6a24]">a male child or a young male person 男孩；男青年</span>
                    <ul class="flex flex-col italic">
                        <li>
                            <span class="">a little/small/young boy</span>
                            <div class="translation">小男孩；小伙子</div>
                        </li>
                        <li>
                            <span class="">I used to play here as a boy.</span>
                            <div class="translation">我小时候常在这里玩。</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <span class="text-xl text-gray-500">[countable] </span>
                    <span class="text-xl text-[#eb6a24]">a young son 年少的儿子</span>
                    <ul class="flex flex-col italic">
                        <li>
                            <span class="">There have two boys and a girl.</span>
                            <div class="translation">他们有两个儿子和一个女儿。</div>
                        </li>
                        <li>
                            <span class="">Her eldest boy is at college.</span>
                            <div class="translation">她的长子在上大学。</div>
                        </li>
                    </ul>
                </li>
            </ol>
        </div>
        <div v-if="rObj.tabIndex == 1" class="definition-section">
            <h2>exclamation(惊叹词)</h2>
            <div class="definition text-xl">
                <span class="text-gray-500">(informal, especially NAmE) </span>
                <span class="not-italic text-[#eb6a24]">used to express feelings of surprise, pleasure, pain, etc. (表示惊奇、高兴、痛苦等)</span>
            </div>
            <ul class="flex flex-col italic">
                <li>
                    <span class="">Boy, it sure is hot!</span>
                    <div class="translation">哟，真够辣的！</div>
                </li>
                <li>
                    <span class="">Oh boy! That’s great!</span>
                    <div class="translation">哇！真了不起！</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const rObj = reactive({
    tabIndex: 0,
})

</script>

<style lang="scss" scoped>
.container {
    background-color: #fdf7e3;
    font-family: "Arial", sans-serif;
    color: #333;

    .dictionary-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .dictionary-header .pos {
        background-color: #d9534f;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 10px;
    }

    .dictionary-header .word {
        font-size: 2rem;
        font-weight: bold;
        margin-right: 10px;
    }

    .dictionary-header .tags {
        display: flex;
        gap: 5px;
    }

    .dictionary-header .tags .tag {
        background-color: #4f8a10;
        color: #fff;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 0.8rem;
    }

    .pronunciation {
        display: flex;
        align-items: center;
        // margin-bottom: 10px;
    }

    .pronunciation .label {
        color: #0056b3;
        margin-right: 5px;
    }

    .pronunciation .audio {
        color: #0056b3;
        margin-left: 5px;
    }

    .definition-section h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .definition-section .definition {
        font-style: italic;
        margin-bottom: 10px;
    }

    .example {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .example .audio {
        color: #0056b3;
        margin-left: 5px;
    }

    .example .favorite {
        color: #f0ad4e;
        margin-left: 5px;
    }

    .translation {
        color: #777;
    }
}
</style>
